<template>
	<view class="page-content">
		<view style="padding: 0 32rpx;height: 100%;overflow-y: auto">
			<view class="content-box">
				<view class="notice-box">
					<u-notice-bar mode="horizontal" :list="list" color="#000000" bg-color="rgba(255,214,0,0.25)" border-radius="4"
						:volume-icon="false" font-size="20"></u-notice-bar>
				</view>
				<form-item-title text="目的地信息"></form-item-title>
				<u-upload width="calc(100vw - 120rpx)" ref="fileref" :header="header" :action="action"
					@on-success="successPhoto" @on-remove="removePhoto" max-count="1" upload-text="点击上传目的地图片"></u-upload>
				<view class="form-box">
					<u-form :label-style="labelStyle">
						<u-form-item label="标题"><u-input input-align="right" v-model="formdata.title" /></u-form-item>
						<u-form-item label="派对地址"><u-input input-align="right" disabled @click="getMapLocation"
								v-model="formdata.partyAddress" /></u-form-item>
					</u-form>
				</view>
			</view>
			<form-item-title text="成团信息"></form-item-title>
			<view class="content-box">
				<view class="form-box">
					<u-form-item label="派对费用(只)" :label-style="labelStyle"><u-input input-align="right" type="digit"
							v-model="formdata.fees" /></u-form-item>
					<u-form-item label="派对时间" :label-style="labelStyle"><u-input input-align="right" disabled="true"
							placeholder="请选择" v-model="formdata.partyTime" @click="showCalendar=true" /></u-form-item>
					<u-form-item label="成团数量" :label-style="labelStyle"><u-input input-align="right" type="number"
							v-model="formdata.num" /></u-form-item>
				</view>
			</view>
			<view class="content-box">
				<view class="form-box">
					<u-form-item label="简介" :label-style="labelStyle" label-position="top">
						<u-input type="textarea" v-model="formdata.remark" />
					</u-form-item>
				</view>
			</view>
		</view>
		<view class="bottom-box">
			<view class="form-box">
				<view class="flex-row justify-between items-center group_16">
					<view class="publish-btn" @click="handleSubmit">
						立即发布
					</view>
				</view>
			</view>
		</view>
		<u-calendar v-model="showCalendar" btn-type="warning" active-bg-color="#fbd610" mode="date" @change="changeCalendar"
			:min-date="todayData" :max-date="maxDate"></u-calendar>
		<u-picker mode="time" v-model="showDatePicker_start" :params="params" title="选择开始时间"
			@confirm="confirmDateStart"></u-picker>
		<u-picker mode="time" v-model="showDatePicker_end" :params="params" title="选择结束时间"
			@confirm="confirmDateEnd"></u-picker>
	</view>
</template>

<script>
	import formItemTitle from "components/index/form-item-title.vue";
	import petParty from "../../../api/petParty.js";
	import utils from "../../../utils/util.js";
	export default {
		data() {
			return {
				list: [
					'温馨提示：感谢您使用宠行宝•宠物巴士服务，平台提供信息共享服务，请您保护好自己的财产安全，期间的财物及人身安全责任需自行承担。'
				],
				action: this.$config.mobeilURL + '/common/uploadFile', // 演示地址
				labelStyle: {
					fontWeight: "bold",
					fontSize: "28rpx",
					whiteSpace: "nowrap"
				},
				fileList: [],
				formdata: {
					distance: "",
					fees: 0.00,
					introduce: "",
					lat: 0,
					lng: 0,
					num: 0,
					partyAddress: "",
					partyTime: "",
					photo: "",
					remark: "",
					title: "",
				},
				header: {
					"content-type": "multipart/form-data",
					"Authorization": uni.getStorageSync('cxbtoken')
				},
				maxDate: '9023-01-01',
				todayData: '',
				showDatePicker_start: false,
				showDatePicker_end: false,
				showCalendar: false,
				params: {
					year: false,
					month: false,
					day: false,
					hour: true,
					minute: true,
					second: false,
				},
			}
		},
		onLoad() {
			this.todayData = new Date().toISOString().split('T')[0];
		},
		methods: {
			successPhoto(data, index) {
				if (data.code !== 200) {
					this.$refs.fileref.lists[index].error = true
				} else {
					this.fileList.push(data.accessPath);
					this.formdata.photo = data.accessPath;
				}
			},
			removePhoto(index) {
				this.fileList.splice(index, 1);
				this.formdata.photo = "";
			},
			//定位选择详细地址
			getMapLocation() {
				utils.chooseLocationInfo().then((res) => {
					this.formdata.lat = res.longitude;
					this.formdata.lng = res.latitude;
					this.formdata.partyAddress = res.name;
				});
			},
			handleSubmit() {
				this.formdata.lng = `${this.formdata.lng}`;
				this.formdata.lat = `${this.formdata.lat}`;
				uni.showLoading({
					title: '发布中'
				})
				petParty
					.addPetParty(this.formdata)
					.then((res) => {
						uni.hideLoading();
						if (res.code === 200) {
							uni.showToast({
								title: '发布成功',
								icon: "none"
							})
							uni.navigateBack()
						} else {
							uni.showToast({
								title: '发布失败',
								icon: "error"
							})
						}
					})
					.catch((err) => {
						uni.hideLoading();
						uni.showToast({
							title: '发布失败',
							icon: "error"
						})
					});
			},
			changeCalendar(e) {
				this.date = `${e.month}-${e.day}`;
				this.showDatePicker_start = true;
			},
			confirmDateStart(e) {
				let str = `${this.date} ${e.hour}:${e.minute}`
				this.showDatePicker_end = true;
				this.showDatePicker_start = false;
				this.startTimeStr = str
			},
			confirmDateEnd(e) {
				let str = `${e.hour}:${e.minute}`
				this.formdata.partyTime = `${this.startTimeStr}-${str}`
			},
		},
		components: {
			formItemTitle
		}
	}
</script>

<style lang="scss" scoped>
	.page-content {
		height: 100%;
		background-color: #F6F6F6;
		overflow-y: auto;

		.content-box {
			width: 100%;
			background: #FFFFFF;
			border-radius: 16rpx 16rpx 16rpx 16rpx;

			.notice-box {
				padding: 24rpx;
			}

			.form-box {
				padding: 0 32rpx;
				margin-bottom: 40rpx;
			}

			.group_5 {
				padding: 40rpx 0;
				border-bottom: solid 2rpx #f3f3f3;

				.font_2 {
					font-size: 28rpx;
					font-family: PingFang SC;
					line-height: 26.18rpx;
					font-weight: 700;
					color: #000000;
				}

				.text_3 {
					line-height: 25.7rpx;
				}

				.font_4 {
					font-size: 28rpx;
					font-family: PingFang SC;
					line-height: 20.78rpx;
					font-weight: normal;
					color: #999999;
				}
			}
		}

		.bottom-box {
			padding: 16rpx 0;
			background: #FFFFFF;
			box-shadow: 0rpx -8rpx 30rpx 0rpx rgba(0, 0, 0, 0.05);
			border-radius: 24rpx 24rpx 0rpx 0rpx;

			.mt-7 {
				margin-top: 14rpx;
			}

			.group_16 {
				padding-left: 36rpx;
				padding-right: 28rpx;

				.publish-btn {
					width: 100%;
					padding: 40rpx 0;
					background-color: #fbd610;
					border-radius: 68rpx;
					font-size: 32rpx;
					text-align: center;
					font-weight: 700;
					margin-bottom: 24rpx;
				}
			}
		}

		/deep/.u-upload {
			justify-content: center;
			flex-wrap: nowrap;
			overflow-x: auto;
		}
	}
</style>